<template>
  <div class="index" :style="{ width: a + 'px' }">
    <!-- 头部 -->
    <headers></headers>
    <!-- 内容 -->
    <div class="input">
      <div class="input-center">
        <div class="input-left">
          <img :src="headee_img.img" alt="" />
        </div>
        <div class="input-right">
          <input type="text" v-model="type" />
          <button @click="sousuo()">搜索</button>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="header-center">
        <el-carousel indicator-position="outside">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="(item, index) in img" :key="index">
              <img :src="item.img" alt="" @click="imgd(item.id)" />
            </el-carousel-item>
          </el-carousel>
        </el-carousel>
      </div>
    </div>
    <div class="center">
      <div class="center-center">
        <!-- 热门商机 -->
        <div class="shangji"><p>热门商机</p></div>
        <!-- 采购列表 -->
        <div class="center-one">
          <div class="center-one-left">
            <div class="center-one-left-top">
              <span>需求列表</span>
              <span
                ><a
                  style="color: #cccccc"
                  href="javascript:void(0);"
                  @click="$router.push('bidding')"
                  >更多 ></a
                ></span
              >
            </div>
            <div class="center-one-left-buttom">
              <a
                class="center-one-left-buttom-block"
                v-for="(c, index) in cglb"
                :key="index"
                @click="xqlb(c.id)"
              >
                <div class="center-one-left-buttom-block-top">
                  <span>{{ c.title }}</span>
                  <span>￥{{ c.price }}元</span>
                </div>
                <div class="center-one-left-buttom-block-buttom">
                  <span>
                    <span>所属类目：</span>
                    <span>{{ c.catename }}</span>
                    <span>{{ c.catenamepid }}</span>
                  </span>
                  <span>{{ c.times }} 截止</span>
                </div>
              </a>
            </div>
          </div>
          <div class="center-one-right">
            <div class="center-one-right-top">
              <span>通知公告</span>
            </div>
            <div class="center-one-right-buttom">
              <ul>
                <li v-for="(t, index) in tzgg" :key="index">
                  <div>
                    <span @click="tzggs(t.id)">{{ t.title }}</span>
                    <span>{{ t.time.slice(0, 10) }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 行业资讯 -->
        <div class="center-two">
          <div class="center-two-left">
            <div class="center-two-left-top">
              <span>行业资讯</span>
            </div>
            <!-- 左边 -->
            <div>
              <div
                class="center-two-left-buttom"
                v-for="(h, index) in information_img.slice(0, 1)"
                :key="index"
              >
                <div class="center-two-left-buttom-img">
                  <img :src="h.img" alt="" />
                </div>
                <div class="center-two-left-buttom-ul">
                  <ul>
                    <li v-for="(y, key) in hyzx.slice(0, 5)" :key="key">
                      <span @click="hyzxs(y.id)">
                        {{ y.title }}
                      </span>
                      <div>{{ y.time.slice(0, 10) }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- 右边 -->
            <div>
              <div
                class="center-two-left-buttom"
                v-for="(h, index) in information_img.slice(1, 2)"
                :key="index"
              >
                <div class="center-two-left-buttom-img-one">
                  <img :src="h.img" alt="" />
                </div>
                <div class="center-two-left-buttom-ul">
                  <ul>
                    <li v-for="(y, key) in hyzx.slice(5, 10)" :key="key">
                      <span @click="hyzxs(y.id)">
                        {{ y.title }}
                      </span>
                      <div>{{ y.time.slice(0, 10) }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <footers></footers>
  </div>
</template>

<script>
import Footers from "../../components/footers.vue";
import Headers from "../../components/headers.vue";
export default {
  components: {
    Footers,
    Headers,
  },
  data() {
    return {
      type: "",
      a: "",
      headee_img: [],
      img: [],
      information_img: [], //行业资讯图片
      hyzx: [], //行业资讯
      cglb: [], //采购列表
      tzgg: [], //通知公告
    };
  },
  created() {
    this.a = document.body.clientWidth - 17;
    if (document.getElementById("bgCanvas") != null) {
      var an = document.getElementById("bgCanvas");
      an.style.display = "none";
    }
  },
  methods: {
    // banner图链接
    imgd(id){},
    // 需求列表
    xqlb(id) {
      this.$router.push({
        path: "/index/bidding-details",
        query: {
          id: id,
        },
      });
    },
    // 通知公告
    tzggs(id){},
    // 行业资讯
    hyzxs(id){},
    sousuo() {
      if(localStorage.getItem("logo") == null){
        this.$message({
          showClose: true,
          message: "请先登录再搜索哦！",
          type: "warning",
        });
        return;
      }
      if (this.type != "") {
        this.http
        .type('/index',{ type: "title",title:this.type })
        .then((response) => {
          if (response.data.code == 1) {
            this.$router.push({
              path: "/index/bidding",
              query: {
                title: this.type,
              },
            });
          } else {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: "warning",
            });
          }
        })
      } else {
        this.$message({
          showClose: true,
          message: "请先填写内容再搜索哦！",
          type: "warning",
        });
      }
    },
  },
  // 图片接口
  mounted() {
    // banner轮播
    this.http
      .type('/index',{ type: "banner",img:"banner" })
      .then((response) => {
        this.img = response.data;
      }),
    // 图片logo
    this.http
      .type('/index',{ type: "banner",img:"header" })
      .then((response) => {
        this.headee_img = response.data;
      }),
    //行业资讯
    this.http
      .type('/index',{ type: "banner",img:"information" })
      .then((response) => {
        this.information_img = response.data;
      })
  },

  beforeCreate() {
    //需求列表
    this.http
      .type('/index',{type: "cglb" })
      .then((response) => {
        this.cglb = response.data;
      }),
    //通知公告
    this.http
      .type('/index',{ type: "tzgg" })
      .then((response) => {
        this.tzgg = response.data;
      }),
    //行业资讯
    this.http
      .type('/index',{ type: "hyzx" })
      .then((response) => {
        this.hyzx = response.data;
      })
  },
};
</script>

<style src="../src/index.css" scoped></style>